<template>
  <div class="mine-top fadeIn">
	  <img class="mine-top-back" :src="userInfor.backdrop" @click="juMp('/personal',1)">
	  <img class="mine-user-avatar" :src="userInfor.avatarUrl" @click="juMp('/personal',1)">
	  <div class="mine-user">
			<p class="user-nickname" @click="gotoLogin">{{userInfor.nickname}}</p>
			<!-- 点赞+关注+粉丝数 -->
			<div class="global-display">
				<div class="user-data global-display global-a-items" v-for="(item,index) in userData" :key="index">
					<p>{{item.num}}</p>
					<p>{{item.title}}</p>
				</div>
			</div>
			<!-- 年龄 -->
			<div class="age-view global-display global-a-items">
				<p v-if="userInfor.age != ''">{{userInfor.age}}岁</p>
				<p v-if="userInfor.city != ''">{{userInfor.city}}</p>
			</div>
			<!-- uid -->
			<div v-if="userInfor.uid" class="uid-view global-display global-a-items">
				<p>UID:&nbsp;&nbsp;</p>
				<p>{{userInfor.uid}}</p>
			</div>
			<!-- 导航 -->
			<div class="user-navigation global-display global-a-items">
				<p v-for="(item,index) in userTab" :key="index"
			@click="juMp(item.route,index)">{{item.title}}</p>
			</div>
	  </div>
  </div>
  <!-- 我的作品，收藏，喜欢 -->
  <div class="position-height"></div>
  <van-tabs background="none" color="#ffd01e" 
  v-model:active="active"
  @click-tab="onClickTab">
    <van-tab title="作品"></van-tab>
    <van-tab title="收藏"></van-tab>
	<van-tab title="喜欢"></van-tab>
  </van-tabs>
  <div style="height: 1px;"></div>
	<van-list
	  v-model:loading="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  :immediate-check="false"
	  offset="100"
	  @load="onLoad"
	>
  	<Mywork :userTravels="userTravels" :tip="tip"/>
  	</van-list>
  <div style="height: 140px;"></div>
  <tabbar/>
  <skIndex v-if="skeLeton"/>
</template>

<script setup>
import tabbar from '@/page/Tabbar/index.vue'
import card from '@/page/Common-components/card-flow.vue'
import { ref,onMounted, reactive,toRefs,onUnmounted } from 'vue'
import request from '@/api/request.js'
import emitter from '@/api/event.js'
import { useRouter } from 'vue-router'
const $router = useRouter()  // 这是路由跳转的
import skIndex from '@/page/Skeleton-screen/SK-mine.vue'
// 我的作品，收藏，喜欢组件
import Mywork from '@/page/Common-components/my-work.vue'
// 点赞|关注|粉丝数
const userData = ref([
	{
	num:0,
	title:'获赞'
	},
	{
	num:0,
	title:'关注'
	},
	{
	num:0,
	title:'粉丝'
	},
])
// 我的资料导航
const userTab = ref([
	{
		title:'编辑资料',
		route:'/personal',
	},
	{
		title:'密码设置',
		route:'/password',
	}
])
// 存储用户基本信息
const userInfor = reactive({
	avatarUrl:'',
	backdrop:'',
	nickname:'',
	age:'',
	city:'',
	uid:''
})

// tab选项卡切换
const active = ref(0)
// 存储我的作品，收藏，喜欢
const userTravels = ref([])
onMounted(async()=>{
	await myData()
})
// 用于判断是否登录
const loginNot = ref(true)
// 骨架屏
const skeLeton = ref(true)
async function myData(){
	page.value = 1//再次查询时要把页数置为1
	finished.value = false
	active.value = 0
	tabIndex.value = 0
	try{
		// 查询我收到的点赞，关注，粉丝数量
		const myRelated = await request.get('/my_related');
		// 查询我发布的游记
		const myTravel = await request.get('/my_travels',{page:1});
		console.log(myTravel);
		userTravels.value = myTravel.data
		const {concernCount,fansCount,likeCount} = myRelated.data
		// console.log(myRelated.data);
		userData.value[0].num = likeCount
		userData.value[1].num = concernCount
		userData.value[2].num = fansCount
		const {avatarUrl,backdrop,nickname,uid,age,city} = JSON.parse(localStorage.getItem('userInfor'))
		userInfor.avatarUrl = avatarUrl;
		userInfor.backdrop = backdrop;
		userInfor.nickname = nickname;
		userInfor.uid = uid;
		userInfor.age = age;
		userInfor.city = city;
		loginNot.value = true
		skeLeton.value = false
	}catch(err){
		if(err.response && err.response.status == '401'){
			// 未登录，给默认头像，昵称，点击可再次触发登录
			loginNot.value = false
			userInfor.backdrop = 'https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1681234407965-700945.jpg'
			userInfor.avatarUrl = 'https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1681234402293-9911580.jpg'
			userInfor.nickname = '点击登录'
		}
		skeLeton.value = false
	}
}
// 存储我的作品收藏点赞接口
const apiRe = ref(['/my_travels','/my_collection','/my_like_article'])
//存储选项卡选中哪个
const tabIndex = ref(0)
// 存储提示
const tipData = ref(['你还没有发布作品','快去收藏游记吧','你还没有喜欢的游记'])
const tip = ref('你还没有发布作品')
// 查询我的作品收藏点赞
async function onClickTab(event){
	tabIndex.value = event.name
	tip.value = tipData.value[tabIndex.value]
	page.value = 1//再次查询时要把页数置为1
	finished.value = false
	// userTravels.value = []
	if(event.name === 0){//作品
		const myTravel = await request.get(apiRe.value[0],{page:1});
		userTravels.value = myTravel.data
	}else if(event.name === 1){//收藏
		const myTravel = await request.get(apiRe.value[1],{page:1});
		userTravels.value = myTravel.data
	}else{//喜欢
		const myTravel = await request.get(apiRe.value[2],{page:1});
		userTravels.value = myTravel.data
	}
}

// 上啦加载
const loading = ref(false);
const finished = ref(false);
const page = ref(1)
async function onLoad(){
	page.value++
	const API = apiRe.value[tabIndex.value]
	try{
		const user_travels = await request.get(API,{page:page.value})
		userTravels.value = [...userTravels.value,...user_travels.data]
		loading.value = false
		if(user_travels.data.length === 0){
			finished.value = true
		}
	}catch(e){
		page.value = 1
		loading.value = false
		finished.value = true
	}
}
onUnmounted(()=>{
	finished.value = false
	page.value = 1
})
// 登陆成功被触发
emitter.on('login-success', async() => {
	await myData()
})
// 更新资料成功被触发
emitter.on('upload-userdata', async() => {
	const {avatarUrl,backdrop,nickname,uid,age,city} = JSON.parse(localStorage.getItem('userInfor'))
	userInfor.avatarUrl = avatarUrl;
	userInfor.backdrop = backdrop;
	userInfor.nickname = nickname;
	userInfor.uid = uid;
	userInfor.age = age;
	userInfor.city = city;
})
// 发布成功触发
emitter.on('release-success', async() => {
	page.value = 1//再次查询时要把页数置为1
	finished.value = false
	active.value = 0
	tabIndex.value = 0
	// 查询我发布的游记
	const myTravel = await request.get('/my_travels',{page:1});
	userTravels.value = myTravel.data
})
// 导航路由
function juMp(value,index){
	if(!loginNot.value){
		emitter.emit('login-pop-up');
		return false
	}
	if(index === 0){
		// $router.push({path: '/query-travel', query: {type:'103'}})
		$router.push(value)
	}else{
		$router.push(value)
	}
}
// 再次掉起登录
function gotoLogin(){
	if(!loginNot.value){
		emitter.emit('login-pop-up');
		return false
	}
}
</script>

<style scoped>
.mine-top{
	height: 250px;
	position: relative;
}
.mine-top-back{
	width: 100%;
	object-fit:cover;
	height: 250px;
}
.mine-user{
	position: absolute;
	top: 200px;
	left: 0;
	right: 0;
	background-color:#fefefe;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 50px 20px 0 20px;
}
.mine-user-avatar{
	object-fit: cover;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 4px solid #ffffff;
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 0;
	z-index: 999;
	display: inline-block;
	box-sizing: border-box;
	box-shadow: 5px 20px 20px rgba(217, 217, 217, .9);
}
.user-nickname{
	font-size: 20px;
	font-weight: bold;
}
.user-data{
	padding: 10px 10px 10px 0;
}
.user-data p:nth-child(1){
	font-weight: bold;
	padding-right:5px;
}
.user-data p:nth-child(2){
	color: #8f9092;
	font-size: 14px;
}
.age-view p{
	font-size: 14px;
	background-color: #f3f3f4;
	border-radius: 3px;
	padding: 2px 5px;
	color:#74757b;
	margin: 0 5px 10px 0;
}
.uid-view p{
	color: #8f9092;
	font-size: 14px;
}
.user-navigation{
	text-align: center;
	margin-top: 10px;
}
.user-navigation p{
	background-color: #f3f3f4;
	font-size: 14px;
	flex: 1;
	padding: 10px 0;
	font-weight: bold;
	border-radius: 4px;
}
.user-navigation p:nth-child(2){
	margin-left: 5px;
}
.user-navigation p:nth-child(1){
	margin-right: 5px;
}
.position-height{
	height: 170px;
}

</style>